<template>
  <div id="container">
    <div class="contl">
      <p>申请结果(6)</p>
      <h6>发送邀请</h6>
      <ul>
        <li class="item" :class="{active:isActive==index}" v-for="(item,index) in 10" :key="index" @click="go_change(index)">睡我下铺的兄弟 的职位申请</li>
      </ul>
    </div>

    <div class="contr">
      <!-- 应聘人详情 -->
      <div class="detail" v-if="false">
        <div class="head">
          <img src="@/assets/img/user.jpg" alt="">
          <div class="mid">
            <h6>睡我下铺的兄弟</h6>
            <h5>名:杰克&nbsp;&nbsp;&nbsp;&nbsp;姓：斯帕罗</h5>
          </div>
          <div class="rig">
            <h6>拒绝</h6>
            <h5>通过</h5>
            <i class="iconfont">&#xe62f;</i>
          </div>
        </div>
        <div class="content">
          <div class="item" v-for="(item,index) in userData" :key="index">
            <div class="text">
              <h6>{{item.name}}</h6>
              <h5 v-if="!item.img1">{{item.text}}</h5>
              <div v-if="item.img1">
                <img :src="item.img1" alt="">
                <img :src="item.img2" alt="">
              </div>
            </div>
            <h4 v-if="item.time">{{item.time}}</h4>
          </div>
        </div>
      </div>
      <!-- 拒绝 -->
      <div class="refuse" v-if="false">
        <div class="head">
          <i class="el-icon-arrow-left"></i>
          <p>填写拒绝理由</p>
        </div>
        <el-input
          type="textarea"
          :rows="7"
          placeholder="请输入内容"
          class="iconinput"
          v-model="textarea">
        </el-input>
        <div class="font">
          <h1>发送</h1>
        </div>
      </div>
      <!-- 通过申请并分组 -->
      <div class="pass">
        <div class="head">
          <i class="el-icon-arrow-left"></i>
          <p>通过申请并分组</p>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import store from '@/vuex/store.js'
export default {
  data () {
    return {
      isActive: -1,//显示谁的职位申请
      userData: [
        {name:'应聘职位',text:'润色编辑·文稿格式排版'},
        {name:'教育经历',text:'美国加州的某所别人家的大学·某个别人家的专业·本科',time:'2014年 至 2017年'},
        {name:'工作经验',text:'某别人家的公司·润色编辑',time:'2017年 至 2018年'},
        {name:'出版作品',text:'一篇关于如何变帅的论文'},
        {name:'电子邮箱',text:'www.hahahhahahahahaha.@mail.com'},
        {name:'联系电话',text:'+86 15356776567'},
        {name:'申请理由',text:'前不久，帮助首届中国国际进口博览会参会商布展的不少企业，齐聚一个特殊的课堂。'},
        {name:'国家',text:'美国·华盛顿'},
        {name:'证件类型',text:'居民身份证'},
        {name:'证件号码',text:'5978936424927652869'},
        {name:'证件照片',img1:'http://ymzzz.top/dist/static/img/user.00c6aa7.jpg',img2:'http://ymzzz.top/dist/static/img/user.00c6aa7.jpg'},
        {name:'Paypal',text:'897234987235'},
        ],
      textarea: '',
    }
  },
  store,
  methods: {
    go_change:function(res){
      this.isActive = res
    }
  },
  mounted () {
    store.commit('changeactive', 0)
  }
}
</script>
<style lang='scss' scoped>
  @import '../../assets/css/iconfonta.css';
  #container{
    font-size: 14px;
    color: #515151;
    width: calc(100% - 20px);
    height: 100%;
    margin-left: 20px;
    display: flex;
    .contl{
      width: calc(50% - 20px);
      margin-right: 20px;
      height: 100%;
      p{
        font-size: 16px;
        margin-bottom: 10px;
      }
      h6{
        width: 246px;
        height: 26px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(230,230,230,1);
        border-radius:5px;
        text-align: center;
        line-height: 26px;
        color: #56AFF7;
        margin-bottom: 20px;
        cursor: pointer;
      }
      ul{
        overflow-y: auto;
        height: calc(100% - 74px);
        &::-webkit-scrollbar {
          width: 10px;
          height: 1px;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 10px;
          -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
          background: #535353;
        }
        &::-webkit-scrollbar-track {
          -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
          border-radius: 10px;
          background: #EDEDED;
        }
        .item{
          width: 100%;
          height: 36px;
          background: #FAFAFA;
          margin-bottom: 10px;
          padding-left: 20px;
          box-sizing: border-box;
          line-height: 36px;
          cursor: pointer;
          &.active{
            background: #E6E6E6;
          }
        }
      }
    }
    .contr{
      width: 50%;
      height: 100%;
      .detail{
        height: 100%;
        .head{
          display: flex;
          img{
            width: 86px;
            height: 86px;
            margin-left: 10px;
          }
          .mid{
            margin-left: 36px;
            h6{
              margin-top: 34px;
              font-size: 18px;
            }
            h5{
              margin-top: 24px;
              font-size: 14px;
            }
          }
          .rig{
            margin-left: auto;
            align-self: flex-end;
            display: flex;
            align-items: flex-end;
            color: #56AFF7;
            h6{
              margin-right: 16px;
              cursor: pointer;
            }
            h5{
              margin-right: 10px;
              cursor: pointer;
            }
            i{
              font-size: 22px;
              cursor: pointer;
            }
          }
        }
        .content{
          width: 100%;
          height: calc(100% - 120px);
          margin-top: 30px;
          overflow-y: auto;
          &::-webkit-scrollbar {
            width: 10px;
            height: 1px;
          }
          &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #535353;
          }
          &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 10px;
            background: #EDEDED;
          }
          .item{
            margin-bottom: 30px;
            .text{
              display: flex;
              h6{
                width: 120px;
                line-height: 20px;
              }
              h5{
                width: calc(100% - 120px);
                line-height: 20px;
              }
              div{
                display: flex;
                img{
                  width: 132px;
                  height: 90px;
                  margin-right: 16px;
                }
              }
            }
            h4{
              text-align: right;
              font-size: 12px;
              color: #B5B5B5;
              margin-top: 10px;
            }
          }
        }
      }
      .refuse{
        .head{
          display: flex;
          cursor: pointer;
          width: 110px;
          i{
            color: #56B0F8;
            font-size: 14px;
            font-weight: 600;
          }
          p{
            margin-left: 6px;
          }
        }
        .iconinput.el-textarea{
          background: #F0F0F0;
          margin-top: 10px;
          display: block;
        }
        .font{
          display: flex;
          flex-direction: row-reverse;
          margin-top: 10px;
          h1{
            width: 102px;
            height: 26px;
            text-align: center;
            line-height: 26px;
            color: #fff;
            background: #56AFF7;
            border-radius: 5px;
            cursor: pointer;
          }
        }
      }
      .pass{
        .head{
          display: flex;
          cursor: pointer;
          width: 120px;
          i{
            color: #56B0F8;
            font-size: 14px;
            font-weight: 600;
          }
          p{
            margin-left: 6px;
          }
        }
      }
    }
  }
</style>